<nz-card>
  <!-- 订单信息 -->
  <nz-descriptions
    nzTitle="订单信息"
    [nzColumn]="1"
  >
    <nz-descriptions-item nzTitle="订单编号">{{ detailsData?.orderNum || '-' }}</nz-descriptions-item>
    <nz-descriptions-item nzTitle="订单状态">
      <span [ngStyle]="{'color': detailsData?.status | rechargeOrderState: 'colour'}">
        {{ detailsData?.status | rechargeOrderState: 'label' }}
      </span>
    </nz-descriptions-item>
  </nz-descriptions>

  <nz-divider></nz-divider>

  <!-- 买家信息 -->
  <nz-descriptions
    nzTitle="买家信息"
    [nzColumn]="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }"
  >
    <nz-descriptions-item nzTitle="买家账号">{{ detailsData?.userId || '-' }}</nz-descriptions-item>
    <nz-descriptions-item nzTitle="买家电话">{{ detailsData?.userPhone || '-' }}</nz-descriptions-item>
  </nz-descriptions>

  <nz-divider></nz-divider>

  <!-- 收款信息 -->
  <nz-descriptions
    nzTitle="收款信息"
    [nzColumn]="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }"
  >
    <nz-descriptions-item nzTitle="实收金额">{{ (detailsData?.realPrice || '0') }} 元</nz-descriptions-item>
    <nz-descriptions-item nzTitle="收款状态">{{ detailsData?.refundState | collectionStatus }}</nz-descriptions-item>
    <nz-descriptions-item nzTitle="第三方流水号">{{ detailsData?.payOrderNum || '-' }}</nz-descriptions-item>
    <nz-descriptions-item nzTitle="官方价">{{ detailsData?.goodsOriginalPrice || '-' }} 元</nz-descriptions-item>
    <nz-descriptions-item nzTitle="付款方式">{{ detailsData?.payType | payTypeStatus }}</nz-descriptions-item>
    <nz-descriptions-item nzTitle="支付商家编号">{{ detailsData?.paymentMerchantNo || '-' }}</nz-descriptions-item>
    <nz-descriptions-item nzTitle="优惠金额">{{ detailsData?.favorablePrice || '-' }} 元</nz-descriptions-item>
    <nz-descriptions-item nzTitle="付款时间">{{ detailsData?.payTime || '-' }}</nz-descriptions-item>

    <nz-descriptions-item nzTitle="爱豆">{{ detailsData?.aiDouAmount || '0' }}个</nz-descriptions-item>
  </nz-descriptions>

  <nz-divider></nz-divider>

  <!-- 退款信息 -->
  <nz-descriptions
    nzTitle="退款信息"
    [nzColumn]="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }"
  >
    <!-- <nz-descriptions-item nzTitle="退款总额">{{ (detailsData?.refundPrice || 0) + (detailsData?.refundAiDouAmount || 0) }} 元</nz-descriptions-item> -->
    <nz-descriptions-item nzTitle="爱豆">{{ detailsData?.refundAiDouAmount || 0 }} 个</nz-descriptions-item>
    <nz-descriptions-item nzTitle="金额">{{ detailsData?.refundPrice || 0 }} 元</nz-descriptions-item>
  </nz-descriptions>

  <nz-divider></nz-divider>

  <!-- 商品信息 -->
  <nz-descriptions
    nzTitle="商品信息"
    [nzColumn]="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }"
  >
    <nz-descriptions-item nzTitle="商品">{{ detailsData?.goodsName || '-' }}</nz-descriptions-item>
    <nz-descriptions-item nzTitle="产品规格">{{ detailsData?.goodsSpec || '-' }}</nz-descriptions-item>
    <nz-descriptions-item nzTitle="充值账号">{{ detailsData?.rechargeNumber || '-' }}</nz-descriptions-item>
  </nz-descriptions>
</nz-card>

<nz-card class="m-t-2" nzTitle="跟进记录">
  <div class="table-wrap">
    <nz-table
      #followTable
      nzSize="small"
      nzShowSizeChanger
      nzShowQuickJumper
      nzOuterBordered
      [nzFrontPagination]="true"
      [nzLoadingDelay]="100"
      [nzLoading]="followTableParams.loading"
      [nzData]="followTableParams.tableData"
      [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
      [nzTotal]="followTableParams.total"
      [nzPageIndex]="followTableParams.page"
      [nzPageSize]="followTableParams.pageSize"
      (nzPageIndexChange)="onPageIndexChange($event)"
      (nzPageSizeChange)="onPageSizeChange($event)"
    >
      <thead>
        <tr>
          <th nzAlign="center" nzWidth="100px">ID</th>
          <th nzAlign="center" nzWidth="170px">跟进时间</th>
          <th nzAlign="center" nzWidth="160px">跟进人</th>
          <th nzAlign="center">跟进内容</th>
          <th nzAlign="center">附件</th>
        </tr>
      </thead>

      <tbody>
        <tr *ngFor="let data of followTable.data; let index = index;">
          <td nzAlign="center">{{ data.id }}</td>
          <td nzAlign="center">{{ data?.createTime || '-' }}</td>
          <td nzAlign="center">{{ data?.follower || '-' }}</td>
          <td nzAlign="center">{{ data?.content || '-' }}</td>
          <td nzAlign="center">
            <p *ngFor="let tag of data.enclosure">
              {{ interceptStr(tag) }}
              <button *ngIf="tag" nz-button nzType="link" nzSize="small" (click)="downFile(tag)">下载</button>
            </p>
          </td>
        </tr>
      </tbody>
    </nz-table>

    <!-- 分页template -->
    <!-- <ng-template #totalTemplate let-total>共有 {{ total }} 条</ng-template> -->
  </div>
</nz-card>

<nz-card class="m-t-2">
  <div class="foot-btns">
    <button nz-button nzType="primary" class="m-r-10" (click)="followModal()">跟进</button>
    <button nz-button nzType="primary" *ngIf="detailsData?.status === 2" (click)="showRefundModal()">售后退款</button>
  </div>
</nz-card>

<!-- 跟进 -->
<recharge-follow-up #rechargeFollowRef [initParams]="followParams" (deterMine)="loadFollowTable()"></recharge-follow-up>

<!-- S 售后退款 Modal -->
<nz-modal
  nzClassName="custom-model-wrap"
  [nzWidth]="580"
  [nzFooter]="null"
  [(nzVisible)]="isRefundVisible"
  [nzTitle]="'售后退款'"
  (nzOnCancel)="isRefundVisible = false">

  <div *nzModalContent>
    <div class="custom-model-body">
      <p class="refund-tip" [hidden]="this.refundValidateForm.value.refundPrice < 10001">※ 注：当前输入金额已大于10000</p>

      <form nz-form [formGroup]="refundValidateForm">
        <nz-form-item>
          <nz-form-label [nzSpan]="6" nzRequired>退款金额（元）</nz-form-label>

          <nz-form-control [nzSpan]="18" nzErrorTip="请输入退款金额!">
            <nz-input-number
              style="width: 100%;"
              [nzMin]="0"
              [nzStep]="1"
              nzPlaceHolder="请输入退款金额"
              formControlName="refundPrice">
            </nz-input-number>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSpan]="6">备注</nz-form-label>

          <nz-form-control [nzSpan]="18">
            <nz-textarea-count [nzMaxCharacterCount]="100">
              <textarea rows="4" nz-input maxlength="100" formControlName="note" placeholder="请输入备注"></textarea>
            </nz-textarea-count>
          </nz-form-control>
        </nz-form-item>
      </form>

      <dl class="tips-dl p-t-8 p-l-15">
        <dd>1、确认以后，该订单会直接将填写的款项原路退回到用户账户</dd>
        <dd>2、请提前做好备注记录，不要胡乱操作，避免造成损失</dd>
        <dd>3、若用户用爱豆支付，将优先退款爱豆</dd>
      </dl>
    </div>

    <div class="custom-model-foot">
      <div class="custom-foot-cont">
        <button nz-button nzType="default" (click)="isRefundVisible = false">取消</button>
        <button nz-button nzType="primary" [nzLoading]="submitLoading" (click)="subRefunAmount()">确定</button>
      </div>
    </div>
  </div>
</nz-modal>
<!-- E 售后退款 Modal -->